<template>
  <section>
    <section class="filter-bar mb-16">
      <span class="label">门店城市：</span>
      <!--      <a-cascader-->
      <!--        class="mr-24"-->
      <!--        placeholder="请选择所在城市"-->
      <!--        :options="cityList"-->
      <!--        v-model="cityValue"-->
      <!--        @change="cascaderChange"-->
      <!--      >-->
      <!--      </a-cascader>-->
      <SelectCity
        style="width: 300px"
        class="mr-24"
        placeholder="请选择城市"
        :options="{ allowClear: true }"
        v-model="cityId"
        @change="search"
      />
      <a-button type="primary" @click="search">查询</a-button>
      <a-button class="ml-8" @click="reset">重置</a-button>
      <a-button
        v-if="$permissionJudge('VendorAddStore')"
        style="float: right"
        type="primary"
        icon="plus"
        @click="createData()"
        >新增
      </a-button>
    </section>
    <a-spin :spinning="loading">
      <a-list :grid="{ gutter: 16, xs: 1, xxl: 2 }" :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-card :hoverable="true">
            <a-card-meta>
              <a-avatar class="card-avatar" slot="avatar" :src="logoUrl" size="large" />
              <div class="meta-content" slot="description">
                <p class="title">{{ item.name }}({{ item.id }})</p>
                <p class="contact">
                  <a-icon class="mr-5 address-icon" type="user" />
                  {{ item.cityName }}
                  <a-divider type="vertical" />
                  {{ item.contactName }}
                  <a-divider type="vertical" />
                  {{ item.telephone }}
                </p>
                <p class="check-info">
                  <a-icon class="mr-5 address-icon" type="search" />
                  <span
                    :class="{
                      'success-color': item.status === 1,
                      grey: item.status === 2,
                      'warning-color': item.status === 3,
                      'error-color': item.status === 4,
                    }"
                    >{{ stateList.find((l) => l.value === item.status).name }}</span
                  >
                  <template class="check-info" v-if="item.status === 3 && item.auditType === 1">
                    <a-divider type="vertical" />
                    <a href="javascript:" @click="$router.push({ path: '/store-audit' })">查看审核项</a>
                  </template>
                  <tempalte
                    v-else-if="item.status === 2 && item.auditType === 2 && $permissionJudge('StoreAuditManage')"
                  >
                    <a-divider type="vertical" />
                    <span class="ml10 colororange">修改信息待审中</span>
                    <a-divider type="vertical" v-if="$permissionJudge('StoreAuditManage')" />
                    <a
                      href="javascript:"
                      v-if="$permissionJudge('StoreAuditManage')"
                      @click="$router.push({ path: '/store-audit' })"
                      >查看审核项</a
                    >
                  </tempalte>
                  <template v-else>
                    <a-divider type="vertical" />
                    {{ moment(item.createTime).format('YYYY-MM-DD') }} 入驻
                  </template>
                </p>
                <p class="flex address">
                  <a-icon class="mr-5 address-icon" type="compass" />
                  <span class="address-content">{{ item.address }}</span>
                </p>
              </div>
            </a-card-meta>
            <template class="ant-card-actions" slot="actions">
              <a href="javascript:" @click="checkDetails(item)">详情信息</a>
              <a v-if="$permissionJudge('OrderManage')" href="javascript:" @click="viewOrder(item)">查看订单</a>
            </template>
          </a-card>
        </a-list-item>
      </a-list>
      <a-pagination
        style="float: right; margin-right: -10px"
        v-model="pageNum"
        :pageSize="rowsNum"
        :total="total"
        :showTotal="(total) => `共${total}条记录，第${this.pageNum} / ${Math.ceil(total / this.rowsNum)} 页`"
        show-size-changer
        show-quick-jumper
        @change="pageChange"
        @showSizeChange="sizeChange"
      />
    </a-spin>
    <CreateOrEditStoreSituation
      ref="CreateOrEditStoreSituation"
      :name="name"
      @upload="getData"
    ></CreateOrEditStoreSituation>
    <StoreSituationInfo
      ref="StoreSituationInfo"
      :id="id"
      :stateList="stateList"
      @editStore="editStore"
    ></StoreSituationInfo>
  </section>
</template>
<script>
import { getPageStoreList } from '@/api/store'
import CreateOrEditStoreSituation from './CreateOrEditStoreSituation'
import StoreSituationInfo from './StoreSituationInfo'
import { getAllProvinces } from '@/api/geography'
import moment from 'moment'

export default {
  name: 'StoreSituation',
  props: {
    name: {
      //服务商
      type: String,
      default: '',
    },
    logoUrl: {
      type: String,
      default: '',
    },
  },
  components: { CreateOrEditStoreSituation, StoreSituationInfo },
  data() {
    return {
      loading: false,
      customerName: undefined,
      pageNum: 1,
      rowsNum: 10,
      data: [],
      cityList: [],
      cityValue: [],
      stateList: [],
      id: null,
    }
  },
  created() {
    this.id = this.$route.params.id
    this.$utils.getDictList('StoreStatus').then((res) => {
      //门店状态
      this.stateList = res
    })
    this.getData()
    this.allProvinces()
  },
  methods: {
    moment,
    checkDetails(data) {
      // this.$refs.StoreSituationInfo.getData(data)
      this.$router.push({
        //核心语句
        path: '/store-list', //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          id: data.id,
          type:2,
          data:data
        },
      })
    },
    viewOrder(params) {
      this.$router.push({
        name: 'OrderList',
        params,
      })
    },
    allProvinces() {
      getAllProvinces().then((data) => {
        data.forEach((item) => {
          item.label = item.name
          item.value = item.code
          item.children = item.cities.map((e) => ({
            label: e.name,
            value: e.code,
            id: e.id,
          }))
        })
        this.cityList = data
      })
    },
    cascaderChange(val, options) {
      this.cityValue = val
      this.cityId = options[1].id
      this.search()
    },
    editStore(data) {
      this.$refs.CreateOrEditStoreSituation.getData(data)
    },
    //新建
    createData() {
      this.$refs.CreateOrEditStoreSituation.getData()
    },
    getTime(e, stringTime) {
      this.time = e
      this.times = stringTime
    },
    search() {
      this.pageNum = 1
      this.getData()
    },
    reset() {
      this.cityId = undefined
      this.cityValue = []
      this.search()
    },
    pageChange(pageNum) {
      this.pageNum = pageNum
      this.getData()
    },
    sizeChange(pageNum, pageSize) {
      this.pageNum = 1
      this.rowsNum = pageSize
      this.getData()
    },
    getData() {
      this.loading = true
      const { rowsNum, pageNum, cityId, id } = this
      getPageStoreList({
        cityId,
        vendorId: id,
        rowsNum,
        pageNum,
      })
        .then((res) => {
          const { items, rowCount } = res
          this.data = items
          this.total = rowCount
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="less" scoped>
.table-con {
  /deep/ .ant-table-thead > tr > th,
  /deep/ .ant-table-tbody > tr > td {
    padding: 8px;
  }
}

.flex {
  display: flex;
}

.meta-content {
  p {
    margin-bottom: 5px;
  }

  .title {
    font-size: 18px;
    color: #000;
  }

  .address {
    span {
      word-break: break-all;
    }
  }

  .address-icon {
    color: #1890ff;
    font-size: 18px;
  }

  .color52c41a {
    color: #52c41a;
  }

  .colororange {
    color: orange;
  }
}

.address-content {
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
